package com.pj.compose.ui.compose

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.pager.*
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@OptIn(ExperimentalPagerApi::class)
@Composable
fun TabViewPager(type: Int = 0) {
    val datas = listOf("香蕉", "苹果", "芒果", "萝卜", "咖啡")

    val state = rememberPagerState(
        initialPage = 0,
    )
    val scope = rememberCoroutineScope()
    Column {
        if (type == 0) {
            TabRow(
                selectedTabIndex = state.currentPage,
                contentColor = Color.Black,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        modifier = Modifier.tabIndicatorOffset(tabPositions[state.currentPage]),
                        color = MaterialTheme.colorScheme.secondary
                    )
                }) {
                tabs(
                    datas = datas,
                    scope = scope,
                    state = state
                )
            }
        } else if (type == 2) {
            ScrollableTabRow(
                selectedTabIndex = state.currentPage,
                contentColor = Color.Black, tabs = {
                    datas.forEachIndexed { index, data ->
                        val modifier = Modifier
                            .height(40.dp)
                            .clickable {
                                scope.launch {
                                    state.scrollToPage(index, 0f)//Tab被点击后让Pager中内容动画形式滑动到目标页
                                }
                            }
                        if (index == 0) {
                            modifier.width(200.dp)
                        } else {
                            modifier.width(100.dp)
                        }
                        Box(
                            modifier = modifier, contentAlignment = Alignment.Center
                        ) {
                            Text(text = data, fontSize = 16.sp)
                        }
                    }
                })
        } else {
            ScrollableTabRow(
                selectedTabIndex = state.currentPage,//展示的页码，和Pager的保持一致
                contentColor = Color.Black,
                tabs = { tabs(datas = datas, scope = scope, state = state) }
            )
        }

        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
            HorizontalPager(
                count = datas.size, state = state,//Pager当前所在页数
                modifier = Modifier.fillMaxSize()
            )
            { pagePosition ->
//            Log.e("tag", "加载页码$pagePosition")
                val color = (0..255)
                Box(
                    Modifier
                        .fillMaxSize(),
//                    .background(Color(color.random(), color.random(), color.random())),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = datas[pagePosition])
                }
            }
            HorizontalPagerIndicator(
                pagerState = state,
                modifier = Modifier.padding(bottom = 30.dp),
            )
        }

    }
}

@OptIn(ExperimentalPagerApi::class)
@Composable
private fun tabs(datas: List<String>, scope: CoroutineScope, state: PagerState) {
    datas.forEachIndexed { index, data ->
        Box(
            Modifier
                .height(40.dp)
                .width(100.dp)
                .clickable {
                    scope.launch {
                        state.scrollToPage(index, 0f)//Tab被点击后让Pager中内容动画形式滑动到目标页
                    }
                }, contentAlignment = Alignment.Center
        ) {
            Text(text = data, fontSize = 16.sp)
        }
    }
}

@Preview
@Composable
fun TabViewPagerPrev() {
    TabViewPager()
}